<template>
<div :class="[$style.container]">
  <div :class="[$style.body]">
    <ul :class="[$style.list]" v-infinite-scroll="onLoad" :infinite-scroll-disabled="disabled">
      <li :class="[$style.item, invalidCls(row)]" v-for="(row, i) in pageData.rows" :key="i">
        <div :class="[$style.header]">
          <div :class="[$style.text]">
            <el-tooltip :content="row.remark" placement="top" :disabled="!row.remark" :open-delay="750">
              <span><i class="el-icon-link mr-2"></i>{{row.remark || '未设置备注'}}</span>
            </el-tooltip>
          </div>
          <div :class="[$style.actions]" class="ml-2">
            <el-link :underline="false" @click="onCopy(row)"><i class="el-icon-document-copy"></i></el-link>
            <el-link :underline="false" class="ml-1" @click="onEdit(row)"><i class="el-icon-edit-outline"></i></el-link>
            <el-link :underline="false" class="ml-1" @click="onDelete(row)"><i class="el-icon-delete"></i></el-link>
          </div>
        </div>
        <div :class="[$style.footer]">
          <div><span class="text-secondary">有效期: </span> <span>{{row.expiredTime | date('永久')}}</span></div>
          <div><span class="text-secondary">权限: </span> <span>{{permsText(row)}}</span></div>
        </div>
      </li>
    </ul>
    <empty-data v-if="!pageData.loading && pageData.rows.length < 1">暂无外链信息</empty-data>
    <div class="text-center my-2 text-secondary">
      <span v-if="pageData.loading">加载中...</span>
      <span v-if="!pageData.hasMore && !pageData.loading && pageData.rows.length > 0">没有更多了</span>
    </div>
  </div>
  <doc-link-edit-modal ref="docLinkEditModal"></doc-link-edit-modal>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import DocLinkEditModal from '@/views/pages/components/doc-link-edit-modal/index.vue'
import { PageData, PageQueryParams } from '@/config/page'
import { queryDocLinks, deleteDocLink } from '@/api/doc-link'
import { copyToClipboard } from '@/utils/copy'
import { getInitOptions } from '@/config/init'

const permsMap = {
  allowPreview: '预览',
  allowDownload: '下载',
  allowUpload: '上传'
}

@Component({
  components: { DocLinkEditModal }
})
export default class DocLink extends Vue {
  @Prop() data!: any

  @Ref() docLinkEditModal!: DocLinkEditModal

  pageData = new PageData(this.loader)

  get loader () {
    return (params: PageQueryParams) => {
      const extra = Object.assign({ docId: this.data?.id }, params)
      return queryDocLinks(extra)
    }
  }

  get disabled () {
    return this.data.loading || !this.data.hasMore
  }

  invalidCls (row: any) {
    return !row.doc ? this.$style.invalid : ''
  }

  permsText (row: any) {
    return Object.entries(permsMap).filter(([k, v]) => !!row[k]).map(([k, v]) => v).join('/') || '-'
  }

  onCopy (row: any) {
    const url = getInitOptions().api + '/s/' + row.id
    const sys = '[玖钉文档]'
    const name = row?.doc?.name || row?.name
    copyToClipboard(`${url} ${sys} ${name}`)
    this.$message.info('已复制到粘贴板')
  }

  onEdit (row: any) {
    this.docLinkEditModal.open(null, row).then(() => {

    }).catch(() => {
      this.pageData.reload(true)
    })
  }

  onDelete (row: any) {
    this.$confirm('确认删除该条外链, 删除后不可恢复。', '删除外链', {
      confirmButtonText: '删 除',
      cancelButtonText: '取 消',
      confirmButtonClass: 'el-button--danger',
      type: 'error'
    }).then(() => {
      deleteDocLink(row.id).then(() => {
        this.pageData.reload(true)
        this.$message.success('已删除')
      })
    }).catch(() => {
      // ignore
    })
  }

  onLoad () {
    this.pageData.loadNext()
  }

  created () {
    this.pageData.load({ prop: 'creationTime', order: 'desc' })
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.body {
  overflow: auto;
  height: calc(100vh - 48px - 40px - 64px);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  padding: 8px 12px;

  &:hover {
    background-color: $bg-body-color;

    & .actions {
      visibility: visible;
    }
  }

  &.invalid {
    opacity: .6;
  }
}

.header {
  display: flex;
  width: 100%;
}

.text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions {
  flex: 0 0 auto;
  visibility: collapse;
}

.footer {
  margin-top: 4px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
</style>
